<template>
    <div>

        <div id="improve_user_information">
            <div class="userinfo">
                <x-header slot="header" :left-options="{backText: ''}" style="" title="完善用户信息">
                    <a href="./#/racelist" style="font-size:24px" slot="right">
                        <i class="fa fa-home fa-fw"></i>
                    </a>
                </x-header>

                <group>
                    <XInput title="证件号" :is-type="isIdNumber" v-model="idnum"></XInput>
                    <XInput title="手机号" :is-type="isTel" v-model="phone"></XInput>
                    <x-input placeholder="请填写验证码" v-model="code" class="weui-vcode">
                        <x-button :disabled='clock' slot="right" type="primary" @click.native="countDown" mini>{{codeMessage}}
                        </x-button>
                    </x-input>
                    <XInput title="邮箱" is-type=email v-model="email"></XInput>

                </group>

                <group style="padding:10px">

                    <x-button v-if='!!bid' :disabled="!issubmit" @click.native="modifyuserbind" type="primary">更新资料</x-button>
                    <x-button v-if='!bid' :disabled="!issubmit" @click.native="bind" type="primary">绑定资料</x-button>

                </group>

            </div>
        </div>

        <myFooter></myFooter>
    </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const url = "//img.ihuipao.cn/";
const countTime = 60; //倒数计时60秒

//let host = "http://jiangtao.v3.ihuipao.com/";

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import MyFooter from "@/common/components/myfooter.vue";
import Upfile from "@/common/components/upfile.vue";
import {setTitle} from '@/common/js/main.js'

import {
  XHeader,
  CellBox,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import mixin from "@/common/js/mixin";
import {
  isIdNumber,
  isTel,
  isEamil,
  GetQueryString
} from "@/common/js/main.js";
import { setTimeout } from "timers";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      isIdNumber: function(value) {
        return {
          valid: isIdNumber(value),
          msg: "请输入正确的证件号"
        };
      },
      isTel: function(value) {
        return {
          valid: isTel(value),
          msg: "请输入正确的手机号码"
        };
      },
      bid: "",
      email: "",
      phone: "", //手机号码
      idnum: "", //证件号
      name: "",
      avatar:
        "//img.ihuipao.cn/image/png/c6a22affc455904cc8a780f8b3cec1d5.png",
      defaultstate: "",
      userName: "",
      code: "", //验证码
      clock: false, //验证码状态锁
      codeMessage: "发送验证码" //验证码倒数数字
    };
  },
  computed: {
    issubmit: function() {
      if (this.email != "" && !isEamil(this.email)) {
        return false;
      }
      if (isTel(this.phone) && isIdNumber(this.idnum) && this.code) {
        return true;
      }
      return false;
    }
  },
  beforeCreate() {
    setTitle('完善用户信息')
  },
  created() {
    this.bid = this.$route.query.bid;
    this.getUserInfo();
  },
  mounted() {},
  methods: {
    modifyuserbind() {
      //更新资料
      this.axios
        .post(
          `${host}user/auth/bind/modifyuserbind`,
          qs.stringify({
            mobile: this.phone,
            idnum: this.idnum,
            email: this.email,
            code: this.code,
            id: this.bid
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$router.push({ path: "userinfo" });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    bind() {
      //alert(window.localStorage.getItem("type"))
      //绑定资料
      this.axios
        .post(
          `${host}user/auth/bind`,
          qs.stringify({
            mobile: this.phone,
            idnum: this.idnum,
            email: this.email,
            code: this.code,
            type: window.localStorage.getItem("type")
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$router.push({ path: "userinfo" });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    countDown() {
      if (this.clock) {
        return;
      }

      if (!isTel(this.phone)) {
        this.$vux.toast.show({
          type: "warn",
          text: "请输入正确的手机号码"
        });
        return;
      }

      this.sendCode();
      this.clock = true;
      let _this = this;
      this.codeMessage = countTime;
      let countDown = setInterval(function() {
        //console.log(_this.codeMessage)
        if (_this.codeMessage <= 1) {
          _this.codeMessage = "发送验证码";
          _this.clock = false;
          clearInterval(countDown);
          return;
        }
        _this.codeMessage--;
      }, 1000);
    },
    fileChangeSelf(e) {
      this.saveAvatar(e);
      //console.log(e)
    },
    sendCode() {
      this.axios
        .post(
          `${host}user/sms/send`,
          qs.stringify({
            mobile: this.phone,
            type: "bind"
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$vux.toast.show({
              type: "success",
              text: "验证码发送成功"
            });
          }
        });
    },
    getinfo() {
      //http://jiangtao.v3.ihuipao.com/user/auth/regitration
      this.axios
        .post(
          `${host}user/auth/regitration`,
          qs.stringify({
            account: window.localStorage.getItem("account")
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            console.log(response.data.data.idnum);
            window.localStorage.setItem("idnum", response.data.data.idnum);
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    saveAvatar(e) {
      this.axios
        .post(
          `${host}user/auth/uploadimg`,
          qs.stringify({
            filepathname: `${e.files[e.files.length - 1]}`
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.avatar =
              "//img.ihuipao.cn/" + e.files[e.files.length - 1];
            console.log(this.avatar);
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    getUserInfo() {
      let _this = this;
      this.axios.post(`${host}user/current`).then(response => {
        if (response.data.code == "200") {
          window.localStorage.setItem("account", response.data.data.account);
          this.name = !!response.data.data.name
            ? response.data.data.name
            : "默认姓名";
          this.avatar = !!response.data.data.avatar
            ? url + response.data.data.avatar
            : "//www.spoorts.cn/static/images/per-head-exp.png";
          //this.getinfo();
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    },
    fileChanged() {},
    editPortrait() {
      let _this = this;
      document.querySelector(".vux-header-more").className += " needsclick";
      document.querySelector(".vue-uploader input").click();
      //document.querySelector(".vue-uploader input").click();

      //_this.$refs.input.click();
      //_this.$refs.input.click();

      //console.log(this.$refs.inpput);
      //this.$refs.inpput.click();
    },
    saveName() {
      this.axios
        .post(
          `${host}user/auth/modify`,
          qs.stringify({
            username: this.name
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$vux.toast.show({
              type: "text",
              text: "修改姓名成功"
            });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    loginOut() {
      this.axios.post(`${host}user/logout`).then(response => {
        if (response.data.code == "200") {
          cookie.remove("_sid");
          window.localStorage.setItem("isLogin", "false");
          this.$router.push({ path: "login" });
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Upfile,
    XHeader,
    CellBox,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    MyFooter
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">


#improve_user_information {
}
</style>






